<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>数据驱动</title>
</head>

<body>
    <div>
        商品数量 <input type="text" id="goodsnum" />
    </div>
    <div>
        商品价格 <input type="text" id="goodsprice" />
    </div>
    <div>
        商品小计 <span id="total"></span>
    </div>

</body>
<script>
    //事件驱动
    let goodsnumInput = document.getElementById("goodsnum");
    let goodspriceInput = document.getElementById("goodsprice");
    let totalSpan = document.getElementById("total");


    let goodsInfo = new Proxy({}, {//直接对  对象进行劫持
        set(target, attr, value) {//对象  属性  值
            target[attr] = value;//赋值
            compiler();
        },
        get(target, attr, value) {
            return target[attr];
        }
    })


    function compiler() {
        //赋值的操作
        totalSpan.innerHTML = goodsInfo.goodsnum * goodsInfo.goodsprice;
    }


    goodsnumInput.oninput = function () {
        goodsInfo.goodsnum = goodsnumInput.value;//对象     
    }
    goodspriceInput.oninput = function () {
        goodsInfo.goodsprice = goodspriceInput.value;//对象
    }

//V2的数据驱动有问题  (对象/数组处理)
//动态的给对象的属性 不会更新
//数组的下标 操作数组 响应会丢失
//$set  $nextTick


</script>

</html>